<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>高德地图</el-breadcrumb-item>
  </el-breadcrumb>

  <div id="map-container"></div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted } from "vue";

let map: any = null;

onMounted(() => {
  AMapLoader.load({
    key: "a48767bc1c1e53cc572015fff6510155", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("map-container", {
        // 设置地图容器id
        // viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别 放大缩小的比例 0-20 3-20
        center: [113.562479, 34.823545], // 初始化地图中心点位置
        // mapStyle: "amap://styles/graffiti",
      });

      // 添加地图图层
      /*
        标准图层 TileLayer
        卫星图层 TileLayer.Satellite
        路网图层 TileLayer.RoadNet
        实时交通图层 TileLayer.Traffic
        楼块图层 Buildings
        室内地图 IndoorMap
      */
      // const traffic = new AMap.TileLayer({
      //   autoRefresh: true, //是否自动刷新，默认为false
      //   interval: 180, //刷新间隔，默认180s
      // });
      // map.add(traffic); //通过add方法添加图层

      // 添加控件
      /*
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
      */
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
        // 异步加载插件
        const toolbar = new AMap.ToolBar(); // 缩放工具条实例化
        map.addControl(toolbar);
        const scale = new AMap.Scale(); // 比例尺
        map.addControl(scale);
      });

      // 添加点标记
      const marker = new AMap.Marker({
        position: [113.562479, 34.823545],
        title: "千锋郑州",
        // offset调整自己图片的位置
        offset: new AMap.Pixel(-10, -10),
        icon: "https://vdata.amap.com/icons/b18/1/2.png",
      });
      map.add(marker);

      marker.on("click", () => {
        console.log(111);
      });

      // 添加多边形
      const pathArr = [
        [
          [
            [113.562286, 34.82561],
            [113.564582, 34.823959],
            [113.562849, 34.822779],
            [113.561063, 34.824051],
            [113.562286, 34.82561],
          ],
        ],
      ];
      const polygon = new AMap.Polygon({
        path: pathArr,
        fillColor: "#ccebc5", // 多边形填充颜色
        strokeOpacity: 1, // 线条透明度
        fillOpacity: 0.5, //填充透明度
        strokeColor: "#2b8cbe", // 线条颜色
        strokeWeight: 1, //线条宽度
        strokeStyle: "dashed", // 线样式
        strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
      });
      map.add(polygon);

      // AMap.plugin(["AMap.PlaceSearch"], function () {
      //   //构造地点查询类
      //   var placeSearch = new AMap.PlaceSearch({
      //     pageSize: 5, // 单页显示结果条数
      //     pageIndex: 1, // 页码
      //     city: "010", // 兴趣点城市
      //     citylimit: true, //是否强制限制在设置的城市内搜索
      //     map: map, // 展现结果的地图实例
      //     panel: "panel", // 结果列表将在此容器中进行展示。
      //     autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      //   });
      //   //关键字查询
      //   placeSearch.search("北京大学");
      // });

      map.on("complete", function () {
        // 地图图块加载完成后触发
        console.log("地图加载完成");
      });

      map.on("click", (e: any) => {
        // console.log(e);
        const marker = new AMap.Marker({
          position: [e.lnglat.lng, e.lnglat.lat],
        });
        map.add(marker);
      });

      var circle = new AMap.Circle({
        center: [113.562479, 34.823545], //圆心
        radius: 2000, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        fillOpacity: 0.4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: "#1791fc",
        zIndex: 50,
      });
      map.add(circle);
      // 自动按照一定的比例将所有内容显示在地图上
      map.setFitView();
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style lang="less" scoped>
#map-container {
  height: 500px;
}
</style>
